<template>
  <div class="app-zz">
    <f-config-provider :locale="locale">
      <!-- <div class="flex" v-watermark="{ text: ['水印指令|watermark', pack.name, pack.version] }"> -->
      <div class="flex" v-watermark="{ text: watermarkText }">
        <f-ztree
          class="w200 br sider-menu"
          :data="menuList"
          :fieldNames="{ label: 'name', key: 'name' }"
          @current="getImport" />
        <div style="width: 0; flex: 1">
          <!-- <KeepAlive> -->
            <component :is="bodyComponent" />
          <!-- </KeepAlive> -->
        </div>
      </div>
      <f-box-set />
    </f-config-provider>
  </div>
</template>

<script setup>
import { ref, shallowRef, onMounted, inject, computed } from 'vue';
import { setCookie, parseQueryString } from 'fok-js';
import pack from '../package.json';

const locale = inject('locale');
const menuList = ref([]);
const bodyComponent = shallowRef();

const _import = (file) => require('./views/' + file + '.vue').default;

const getImport = (node) => {
  console.log(node);
  bodyComponent.value = _import(node.name);
};

const search = window.location.href;
const qs = parseQueryString(search);
if (qs.token) {
  setCookie('his_token', qs.token);
}

const textStr = ref('我是变化前的文本');

setTimeout(() => {
  textStr.value = '1234567890';
}, 1000 * 3);

const watermarkText = computed(() => {
  return [
    '水印指令 | watermark',
    pack.name + ' | ' + pack.version,
    textStr.value
  ];
});

onMounted(() => {
  const r = require.context('./views/', true, /^\.\/.+\.vue$/);
  const list = [];
  r.keys().forEach((key, index) => {
    const attr = key.substring(key.lastIndexOf('./') + 2, key.lastIndexOf('.'));
    list.push({ name: attr, url: attr, menuId: key });
    // console.log(`%c${key} 文件翻译路由 ${attr}`, 'color:red');
  });
  menuList.value = list;
});
</script>

<style lang="scss">
body {
  padding: 0;
  margin: 0;
  color: #232A35;
  background-color: rgba(245, 245, 245) !important;
  overflow: hidden;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.sider-menu {
  height: 100vh;
  overflow-y: scroll;
}
</style>
